<template>
  <div class="page-wrapper">
    <!-- 顶部工具栏 -->
    <PageTools :show-before="true">
      <template #before>
        一共{{ total }}名员工
      </template>
      <template #after>
        <el-button type="primary" size="small" @click="isShowDialog=true">新增</el-button>
        <el-button type="success" size="small" @click="$router.push('/employees/import')">导入</el-button>
        <el-button type="info" size="small" @click="export2Excel">导出</el-button>
      </template>
    </PageTools>
    <!-- 主要内容表格 -->
    <el-card>
      <el-table border :data="list">
        <el-table-column label="序号" sortable="" prop="index" />
        <el-table-column label="姓名" sortable="" prop="username" />
        <el-table-column label="工号" sortable="" prop="workNumber" />
        <el-table-column label="聘用形式" sortable="" prop="formOfEmployment" :formatter="formatEmployment" />
        <el-table-column label="部门" sortable="" prop="departmentName" />
        <el-table-column label="入职时间" sortable="" prop="timeOfEntry">
          <template v-slot="scope">
            {{ scope.row.timeOfEntry | formatDate }}
          </template>
        </el-table-column>
        <el-table-column label="账户状态" sortable="">
          <template v-slot="scope">
            <el-switch
              v-model="scope.row.enableState"
              :active-value="1"
              disabled
            />
          </template>
        </el-table-column>
        <el-table-column label="操作" sortable="" fixed="right" width="280">
          <template v-slot="scope">
            <el-button type="text" size="small" @click="$router.push(`/employees/detail/${scope.row.id}`)">查看</el-button>
            <el-button type="text" size="small">角色</el-button>
            <el-button type="text" size="small" @click="delEmployee(scope.row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页组件 -->
      <el-row type="flex" justify="center" align="middle" style="height: 60px">
        <el-pagination :page-size="pageConfig.size" :total="total" layout="prev, pager, next" @current-change="currentChange" />
      </el-row>
    </el-card>
    <!-- 新增弹窗 -->
    <EmployeeDialog :is-show-dialog="isShowDialog" />
  </div>
</template>

<script>
// import PageTools from '@/components/PageTools/index.vue'
import { getEmployee, delEmployee } from '@/api/employee'
import EmployeeEnum from '@/constant/employees'
import { export_json_to_excel } from '@/vendor/Export2Excel'
import { formatDate } from '@/filters/index'
// 引入弹窗组件
import EmployeeDialog from './components/employee-dialog/index.vue'

export default {
  components: {
    // PageTools
    EmployeeDialog
  },
  data() {
    return {
      list: [],
      total: 0,
      pageConfig: {
        page: 1,
        size: 5
      },
      isShowDialog: false
    }
  },
  created() {
    this.loadList()
  },
  methods: {
    async export2Excel() {
      console.log('点击了导出按钮')
      // 获取到表格的所有数据
      const res = await getEmployee({
        page: 1,
        size: this.total
      })
      console.log(res.rows)
      // ===================
      // 改造数据
      const header = ['工号', '姓名', '手机号', '聘用形式', '入职时间']
      const data = res.rows.map(item => {
        const arr = []
        arr.push(item.workNumber)
        arr.push(item.username)
        arr.push(item.mobile)
        // 聘用形式
        let res = ''
        EmployeeEnum.hireType.forEach(el => {
          if (+el.id === +item.formOfEmployment) {
            res = el.value
          }
        })
        arr.push(res)
        // 入职时间
        arr.push(formatDate(item.timeOfEntry))
        return arr
      })
      console.log(data)
      export_json_to_excel({
        header,
        data
      })

      // export_json_to_excel({
      //   header: ['姓名', '工号', '手机'],
      //   data: [
      //     ['小明', 1001, '13438488889'],
      //     ['小红', 1002, '13448488889'],
      //     ['小刚', 1003, '13458488889'],
      //     ['小霞', 1004, '13468488889']
      //   ],
      //   filename: '导出数据',
      //   autoWidth: true
      // })
    },
    async loadList() {
      const res = await getEmployee(this.pageConfig)
      // console.log('员工数据', res)
      this.total = res.total
      this.list = res.rows.map((item, index) => {
        return {
          ...item,
          index: (this.pageConfig.page - 1) * (this.pageConfig.size) + index + 1
        }
      })
    },
    currentChange(newPage) {
      this.pageConfig.page = newPage
      this.loadList()
    },
    formatEmployment(row, column, cellValue, index) {
      let res = ''
      EmployeeEnum.hireType.forEach(item => {
        if (+item.id === +cellValue) {
          res = item.value
        }
      })
      return res
    },
    // 删除员工
    async delEmployee(id) {
      // console.log(id)
      await this.$confirm('是否确认删除')
      await delEmployee(id)
      this.$message.success('删除成功')
      if (this.pageConfig.page > 1 && this.list.length === 1) {
        this.pageConfig.page--
      }
      this.loadList()
    }
  }
}
</script>

<style>

</style>
